/*!
 * compiler 用来编译移动表单项
 * @param { Object } meta -- 表单项meta信息
 * @param { Object } components -- 编译的移动组件名称集合
 * @param { String } dom -- vue实例编译集合
 */


import { recalculate } from 'utils'

const compiler = ( meta, components, dom ) => {
  let template = `<div>`;
  let data = {};
  // 子表外的form项计算联动meta
  let exmeta = JSON.parse(JSON.stringify(meta)).filter((item) => {
    return !item.computeRule || !item.computeRule.startsWith('VALUE(') || (item.computeRule.startsWith('VALUE(') && item.computeRule.substring(6, item.computeRule.length - 1).indexOf('.') === -1)
  })
  meta.forEach(item => {
    if(item.url) {
      let signTag = item.url.slice(item.url.lastIndexOf('/') + 1, item.url.lastIndexOf('.'));
      if (typeof item.supportSigns == 'object') {
        item.supportSigns = item.supportSigns[signTag];
      }
    }
    switch (item.xtype) {
      case 'text':
      case 'number':
      case 'textarea':
        template += `<mb-field :item="${item.name}.item" :result="${item.name}.result" @formChange="formChange" ref="${item.name}"></mb-field>` 
        data[item.name] = {
          item: item,
          result: item.defaultValue_display || item.defaultValue || null
        }
        break;
      case 'select': 
      case 'radiolist': 
        template += `<mb-select :item="${item.name}.item" :result="${item.name}.result" :result_display="${item.name}.result_display" @formChange="formChange" ref="${item.name}"></mb-select>` 
        data[item.name] = {
          item: item,
          result: item.defaultValue || null,
          result_display: item.defaultValue_display || null
        }
        break;
      case 'checkboxlist':
        template += `<mb-select :item="${item.name}.item" :result="${item.name}.result" :result_display="${item.name}.result_display" @formChange="formChange" ref="${item.name}" multiple></mb-select>` 
        data[item.name] = {
          item: item,
          result: item.defaultValue || null,
          result_display: item.defaultValue_display || null
        }
        break;
      case 'switcher':
        template += `<mb-switcher :item="${item.name}.item" :result="${item.name}.result" :result_display="${item.name}.result_display" @formChange="formChange" ref="${item.name}"></mb-switcher>` 
        data[item.name] = {
          item: item,
          result: item.defaultValue || null,
          result_display: item.defaultValue_display || null
        }
        break;
      case 'date-full':
        template += `<mb-datetime-picker :item="${item.name}.item" :result="${item.name}.result" @formChange="formChange" ref="${item.name}"></mb-datetime-picker>` 
        data[item.name] = {
          item: item,
          result: item.defaultValue || null
        }
        break;
      case 'uploadfile': 
        template += `<mb-uploader :item="${item.name}.item" :result="${item.name}.result" @formChange="formChange" ref="${item.name}"></mb-uploader>` 
        data[item.name] = {
          item: item,
          result: item.defaultValue || null
        };
        break;
      default:
        break;
    }
  })
  template += `</div>`
	// 创建构造器
	var Profile = Vue.extend({
      template: template,
      data: function () {
        return {
          ...data,
          formData: {},
          meta: meta,
          exmeta: exmeta
        }
      },
      components:{
        ...components
      },
      methods: {
        formChange(name, values, item) {
          const _this = this;
          if(this.formData[name] == null) {
            this.formData = Object.assign(this.formData, values)
          } else {
            this.formData[name] = values[name];
            if(values[name + "_display"] != null) this.formData[name + "_display"] = values[name + "_display"]
          }
          let newData = recalculate(this.formData, this.exmeta);
          this.meta.forEach(opt => {
            if(newData[opt.name]){
              _this.$refs[opt.name].value = newData[opt.name]
            }
          })
          this.$emit("formdataChange", name, values, item)
        },
        setFormValues(form) {
          this.formData = form;
          for(var key in form) {
            if(!/_display/.test(key)) {
              this[key]["result"] = form[key];
              if(form[key + "_display"]) this[key]["result_display"] = form[key + "_display"]
            }
          }
        },
        validate() {
          let valid = true;
          const _this = this;
          this.meta.forEach(item => {
            if(!_this.$refs[item.name].validate()) valid = false;
          })
          return valid
        }
      }
    })
  // 创建 Profile 实例，并挂载到一个元素上。
  return new Profile().$mount(dom)

}
export default compiler



// const xtype = [{
//   value: 'text',
//   label: '单行文本'
// }, {
//   value: 'textarea',
//   label: '多行文本'
// }, {
//   value: 'select',
//   label: '下拉选择'
// }, {
//   value: 'radiolist',
//   label: '单选'
// }, {
//   value: 'checkboxlist',
//   label: '多选'
// }, {
//   value: 'date-full',
//   label: '日期'
// }, {
//   value: 'number',
//   label: '数字'
// }, {
//   value: 'switcher',
//   label: '开关'
// }, {
//   value: 'uploadfile',
//   label: '文件上传'
// }]

/**
 * 模型类型匹配到控件类型
 */
// const dtMap = {
//   'String': 'text',
//   'int': 'number',
//   'double': 'text',
//   'long': 'number',
//   'boolean': 'switcher',
//   'Timestamp': 'date-full',
//   'Object': 'text',
//   'Clob': 'uploadfile'
// }